<template>
	<view>
		<view class="top" :style="(isPage && orderList.length == 0) ? 'background: #FFFFFF;':'background: #FAFAFA;'">
			<view class="top-left">共<text>{{total}}</text>件商品</view>
			<view class="top-right" @tap="editCom = true" v-if="editCom == false">编辑</view>
			<view class="top-right" @tap="editCom = false" v-else>完成</view>
		</view>
		<view class="none" v-if="isPage && orderList.length == 0">
			<i class="iconfont iconquesheng"></i>
			<text>暂无数据~</text>
		</view>
		<view class="orderList" v-else>
			<view class="item" v-for="(val,num) in orderList" :key="num">
				<radio color="#E6B873" @tap="handelRadio(num)" :checked="val.checked" v-if="editCom == true"></radio>
				<view class="item-right" :style="editCom == true ? 'width: calc(100% - 90upx)':'width:100%;'">
					<CardMsg :item-id="val.goods_id" :src="val.path" :name="val.goods_name" :price="val.price"
						:number="val.goods_subname" :numberStyle="{color: '#E6B873'}"
						:priceStyle="{color: '#E43841'}" />
				</view>
			</view>
			<uni-load-more v-if="orderList.length >= 8" :status="status" :content-text="contentText" />
		</view>
		<view class="footer-content" v-if="editCom == true">
			<view class="all-change">
				<label class="radio-title" @tap="selAllCom">
					<radio color="#E6B873" :checked="selAll"></radio>全选（{{selCount}}）
				</label>
			</view>
			<view class="closing-btn del-btn" @tap="deelSel">删除</view>
		</view>
	</view>
</template>

<script>
	import CardMsg from "@/components/cardStyle/card-1.0.vue";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			CardMsg,
			uniLoadMore
		},
		data() {
			return {
				total: 0, //列表商品数量
				editCom: false, //是否为编辑
				orderList: [], //订单列表
				page: 1,
				reload: true,
				isPage: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '—— 没有更多了 ——',
					contentnot: "没数据"
				},
				selCount: 0, //已选商品数量
				selAll: false, //是否全选
				type: 1, //1收藏列表 2浏览记录
			}
		},
		onPullDownRefresh() {
			this.publicFunc();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getOrder();
			}, 500);
		},
		onShow() {
			this.publicFunc();
		},
		onLoad(e) {
			if (e && e.type == 2) {
				this.type = e.type;
				uni.setNavigationBarTitle({
					title: '浏览记录'
				})
			}
		},
		methods: {
			// 获取订单列表
			getOrder() {
				if (this.page == 1) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
				}
				var url = 'font/collect/infos';
				if (this.type == 2) {
					url = 'font/footmark/infos';
				}
				this.$shopApi.apiPost(url, {page: this.page}).then(res => {
					if (res.data.code == 200 && res.data.data.list && res.data.data.list.length > 0) {
						var list = res.data.data.list;
						list.forEach(item => {
							item['checked'] = false;
						})
						this.total = res.data.data.total;
						this.orderList = this.reload ? list : this.orderList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.orderList = [];
							this.isPage = true;
						} else {
							this.status = 'noMore';
						}
					}
					uni.hideLoading();
				})
			},
			// 公用方法
			publicFunc() {
				this.page = 1;
				this.reload = true;
				this.isPage = false;
				this.orderList = [];
				this.getOrder();
			},
			// 是否选中商品
			handelRadio(index) {
				this.orderList[index].checked = !this.orderList[index].checked;
				this.$forceUpdate();
				this.coumputedCommodity()
			},
			// 全选&取消全选
			selAllCom() {
				this.selAll = !this.selAll
				this.orderList.forEach(val => {
					val.checked = this.selAll
				})
				this.$forceUpdate();
				this.coumputedCommodity();
			},
			// 计算所有已选商品总数
			coumputedCommodity() {
				this.selCount = 0
				let bol = true
				this.orderList.forEach(val => {
					if (val.checked) {
						this.selCount++
					} else {
						bol = false
					}
				})
				this.selAll = bol;
			},
			// 删除选中商品
			deelSel() {
				var _this = this;
				let arr = []
				this.orderList.forEach(val => {
					if (val.checked) {
						arr.push(val.unid)
					}
				})
				let url = 'font/collect/delete';
				if (this.type == 2) {
					url = 'font/footmark/delete';
				}
				uni.showModal({
					content: '是否将这' + this.selCount + '件商品删除?',
					cancelText: '我再想想',
					cancelColor: '#D9D9D9',
					confirmText: '删除',
					confirmColor: '#F3581D',
					success: (res) => {
						if (res.confirm) {
							_this.$shopApi.apiPost(url, {unid: arr}).then(res => {
								_this.util.showDialog(res.data.message);
								if (res.data.code == 200) {
									for (var i = _this.orderList.length - 1; i >= 0; i--) {
										arr.forEach(item => {
											if (_this.orderList[i].unid == item) {
												_this.orderList.splice(i, 1);
											}
										})
									}
									_this.$forceUpdate();
									_this.coumputedCommodity()
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	@import url("/static/css/order.css");
</style>
